<template>
  <div>
    <el-form :model="formData" :rules="formRules" inline ref="formData" label-position="top" class="row-form">
      <el-card class="box-card">
        <div class="card-view">

          <div class="card-title">基础信息</div>

          <el-form-item label="标题:" prop="title" class="form-item-css">
            <el-input v-model="formData.title" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="描述:" prop="content" class="form-item-css">
            <el-input v-model="formData.content" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="类型" prop="type" class="form-item-css">
            <el-radio-group v-model="formData.type">
              <el-radio :label="0">推荐</el-radio>
              <el-radio :label="1">喜报</el-radio>
              <el-radio :label="2">节日</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="form-item-css">
            <div class="row-between">
              <div class="row-start">
                <div class="form-label">标题文字颜色:</div>
                <div class="form-content">
                  <el-color-picker size="medium" v-model="formData.titleColor" popper-class="theme-picker-dropdown"
                                   :predefine="colorList"/>
                </div>
              </div>
              <div class="row-start">
                <div class="form-label">标题文字大小:</div>
                <div class="form-content">
                  <el-select v-model="formData.titleFontSize" placeholder="请选择">
                    <el-option v-for="(item, index) in 50" :key="index" :label="`FontSize-${12 + item}px`"
                               :value="`${12 + item}`"></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="row-between" style="margin-bottom: 8px">
              <div class="row-start">
                <div class="form-label">描述文字颜色:</div>
                <div class="form-content">
                  <el-color-picker size="medium" v-model="formData.descColor" popper-class="theme-picker-dropdown"
                                   :predefine="colorList"/>
                </div>
              </div>
              <div class="row-start">
                <div class="form-label">描述文字大小:</div>
                <div class="form-content">
                  <el-select v-model="formData.descFontSize" placeholder="请选择">
                    <el-option v-for="(item, index) in 50" :key="index" :label="`FontSize-${12 + item}px`"
                               :value="`${12 + item}`"></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="row-start" style="margin-bottom: 20px">
              <div class="row-start">
                <div class="form-label">标题位置:</div>
                <div class="form-content">
                  <el-input type="number" v-model="formData.titleTop" placeholder="请输入" style="width: 80px"/>
                </div>
              </div>

              <div class="row-start" style="margin-left: 30px">
                <div class="form-label">描述位置:</div>
                <div class="form-content">
                  <el-input type="number" v-model="formData.descTop" :maxlength="3" max="650" placeholder="请输入" style="width: 80px"/>
                </div>
              </div>
            </div>
            <div class="row-start">
              <div class="form-label">字体:</div>
              <div class="form-content">
                <el-select v-model="formData.fontFamily" placeholder="请选择">
                  <el-option v-for="(item, index) in fontFamilyList" :key="index" :label="item"
                             :value="item"></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="海报图片" prop="pictureUrl" class="form-item-css">
            <div class="image-view" v-if="formData.pictureUrl">
              <el-image :src="formData.pictureUrl" fit="cover" style="width: 100%; height: 100%"></el-image>
              <i class="el-icon-circle-close" @click="formData.pictureUrl = null"></i>
            </div>
            <UploadFile v-model="formData.pictureUrl" v-else style="width: 100%"/>
          </el-form-item>
        </div>
      </el-card>

      <div class="row-div" style="margin: 30px 0">
        <el-button style="width: 300px" @click="$router.push('/posterManage/posterList')">取 消</el-button>
        <el-button type="primary" style="width: 300px" @click="onSubmit">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'posterAdd',
    data() {
      return {
        detailId: null,
        gardenList: [],
        colorList: ['#409EFF', '#1890ff', '#304156', '#212121', '#333333', '#11a983', '#13c2c2', '#6959CD', '#f5222d'],
        fontFamilyList: ['宋体, SimSun', '楷体, 楷体_GB2312, SimKai', '黑体, SimHei', '隶书, SimLi'],
        formData: {
          title: null,
          titleFontSize: '24',
          titleColor: '#333333',
          descFontSize: '20',
          descColor: '#333333',
          fontFamily: '宋体, SimSun',
          titleTop: 50,
          descTop: 85,
          content: null,
          type: 0,
          pictureUrl: null
        },
        formRules: {
          'title': [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          'content': [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          'type': [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          'pictureUrl': [
            { required: true, message: '请上传海报', trigger: 'change' }
          ]
        }
      }
    },
    beforeMount() {
      if (this.$route.query.id) {
        this.detailId = this.$route.query.id
        this.getDetailRequest()
      }
    },
    methods: {
      onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return
          const formData = JSON.parse(JSON.stringify(this.formData))
          if (formData.descTop > 650) return this.$message.warning('描述最大位置650')
          const entity = [
            {
              type: 'text',
              text: formData.title,
              key: 'title',
              x: 0,
              y: formData.titleTop - 0,
              fontSize: formData.titleFontSize - 0,
              fontFamily: formData.fontFamily,
              color: formData.titleColor
            },
            {
              type: 'text',
              key: 'desc',
              text: formData.content,
              x: 0,
              y: formData.descTop - 0,
              fontSize: formData.descFontSize - 0,
              fontFamily: formData.fontFamily,
              color: formData.descColor
            }
          ]
          formData.contentJson = JSON.stringify(entity)
          const url = this.formData.id ? '/wx/poster/update' : '/wx/poster/add'
          await this.$ajax.post(url, formData)
          this.$message.success('操作成功!')
          this.$router.push('/posterManage/posterList')
        })
      },
      async getDetailRequest() {
        const res = await this.$ajax.get(`/wx/poster/info?id=${this.detailId}`)
        const contentJson = JSON.parse(res.data.contentJson)
        if (contentJson) {
          contentJson.forEach(item => {
            if (item.key == 'title') {
              res.data.titleTop = item.y
              res.data.titleFontSize = item.fontSize
              res.data.fontFamily = item.fontFamily
              res.data.titleColor = item.color
            }
            if (item.key == 'desc') {
              res.data.descTop = item.y
              res.data.descFontSize = item.fontSize
              res.data.fontFamily = item.fontFamily
              res.data.descColor = item.color
            }
          })
        }
        this.formData = res.data
      }
    }
  }
</script>

<style scoped lang="scss">

  .form-label {
    margin-right: 10px;
  }

  .box-card + .box-card {
    margin-top: 20px;
  }

  .image-list {
    width: 148px;
    height: 148px;
    position: relative;
    margin-right: 10px;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    margin-bottom: 10px;
    &:hover > .image-hover {
      display: flex;
      z-index: 1;
    }
    .image-item, .image-hover {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
    .image-hover {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      font-size: 20px;
    }
  }

  .card-view {
    width: 100%;
    .card-title {
      width: 200px;
      font-weight: bold;
      font-size: 18px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      position: relative;
      &:before {
        content: "";
        width: 200px;
        height: 1px;
        background: #000000;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .form-item-css {
      width: calc(100% / 3 - 10px);
      position: relative;
      .delete-but {
        position: absolute;
        color: red;
        z-index: 2;
        right: 0;
        top: -40px;
      }
    }
  }

  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }

</style>
